<template>
	<!-- 商户！！！！！！！！！！ -->
  <div>
    <div v-if="!shoujiban">
      <div class="t_body_bg" :style="{backgroundImage: 'url('+bgimg+')'}">
        	<div class="t_login_box">
      		<div class="t_logo_font" >
      			<span v-if="!logoimg">logo</span>
      			<img :src="logoimg" alt="">
      		</div>
      		<div class="t_welcome_font" v-if="logintype!=3" >{{ comname }}</div>
      		<div class="t_welcome_font" v-else >找回密码</div>
      		<div class="t_login_con" v-if="logintype!=3">
      			<div class="t_type_box"  v-if="check_code">
      				<div @click="choosetype(1)" class="t_type_btn" :class="{t_type_btn_lei:logintype==1}">登录</div>
      				<div @click="choosetype(2)" style="margin-left: 40px;" class="t_type_btn" :class="{t_type_btn_lei:logintype==2}">注册</div>
      			</div>
      			<!-- 登录展示 -->
      			<div class="t_input_box">
      				<img src="../../static/img/user.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.username" placeholder="账号名称"></el-input>
      			</div>
      			<div class="t_input_box">
      				<img src="../../static/img/psd.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
      			</div>
      			<div @click="loginorreg" v-if="logintype==1" class="t_login_btn_box">
      					登录
      			</div>
      			<!-- 注册展示 -->
      			<div v-if="logintype==2">
      				<div class="t_input_box">
      					<el-input class="t_del_com_input" v-model="form.phonenum" style="margin-left: 36px;" placeholder="请输入手机号"></el-input>
      				</div>
      				<div class="t_input_box">
      					<el-input class="t_del_com_input" v-model="form.code" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
      					<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
      				</div>
      				<div class="t_input_box" v-if="distributor != 0">

      					<el-input class="t_del_com_input" v-model="form.yqcode" style="margin-left: 36px;" placeholder="请输入邀请码"></el-input>
      				</div>
      				<div @click="loginorreg" class="t_login_btn_box">
      					注册
      				</div>
      			</div>

      			<div @click="choosetype(3)" class="t_tips_btn">
      				忘记密码
      			</div>
      		</div>
      		<!-- 找回密码 -->
      		<div class="t_login_con" v-else>
      			<div class="t_input_box">
      				<img src="../../static/img/user.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.username" placeholder="找回密码的账号名称"></el-input>
      			</div>
      			<div class="t_input_box">
      				<el-input class="t_del_com_input" :readonly="readonly" @focus="readonly=false" v-model="form.phonenum" style="margin-left: 36px;" placeholder="请输入手机号"></el-input>
      			</div>
      			<div class="t_input_box">
      				<el-input class="t_del_com_input" v-model="form.code" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
      				<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
      			</div>
      			<div class="t_input_box">
      				<img src="../../static/img/psd.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.password"  placeholder="请输入新密码" show-password></el-input>
      			</div>
      			<div class="t_input_box">
      				<img src="../../static/img/psd.png" alt="">
      				<el-input class="t_del_com_input" v-model="form.passwordagin" placeholder="再次输入密码" show-password></el-input>
      			</div>
      			<div @click="loginorreg" class="t_login_btn_box">
      				确定
      			</div>
      			<div @click="choosetype(1)" class="t_tips_btn">
      				返回登录
      			</div>
      		</div>
      	</div>
      </div>
    </div>
    <div v-if="shoujiban">
      <div class="t_body_bg" style="background-size: cover; width: 100%; " :style="{backgroundImage: 'url('+bgimg+')'}">
        	<div style="width: 90%; background: #fff; margin:0 5%; border-radius: 0.5rem; padding-bottom: 0.5rem; padding-top: 0.5rem;">
            <div class="t_type_box"  v-if="check_code">
            	<div @click="choosetype(1)" class="t_type_btn" style="font-size: 16px;" :class="{t_type_btn_lei:logintype==1}">登录</div>
            	<div @click="choosetype(2)" style="margin-left: 40px; font-size: 16px;" class="t_type_btn" :class="{t_type_btn_lei:logintype==2}">注册</div>
            </div>
            <div class="t_logo_font" >
              <span v-if="!logoimg">logo</span>
              <img :src="logoimg" alt="">
            </div>
            <div style="text-align: center; font-size: 0.3rem; font-weight: bold; margin: 0.5rem 0;" v-if="logintype!=3" >{{ comname }}</div>
            <div class="t_welcome_font" v-else >找回密码</div>
            <div class="t_login_con" v-if="logintype!=3">
              <!-- 登录展示 -->
              <div class="t_input_box">
                <img src="../../static/img/user.png" alt="">
                <el-input class="t_del_com_input" v-model="form.username" placeholder="账号名称"></el-input>
              </div>
              <div class="t_input_box">
                <img src="../../static/img/psd.png" alt="">
                <el-input class="t_del_com_input" v-model="form.password" placeholder="请输入密码" show-password></el-input>
              </div>
              <div @click="loginorreg" v-if="logintype==1" class="t_login_btn_box">
                  登录
              </div>

              <div v-if="logintype==2">
              	<div class="t_input_box">
              		<el-input class="t_del_com_input" v-model="form.phonenum" style="margin-left: 36px;" placeholder="请输入手机号"></el-input>
              	</div>
              	<div class="t_input_box">
              		<el-input class="t_del_com_input" v-model="form.code" style="margin-left: 36px;width: 148px;" placeholder="请输入验证码"></el-input>
              		<div @click="getcode" class="t_get_code">{{ codemsg }}</div>
              	</div>
              	<div class="t_input_box" v-if="distributor != 0">

              		<el-input class="t_del_com_input" v-model="form.yqcode" style="margin-left: 36px;" placeholder="请输入邀请码"></el-input>
              	</div>
              	<div @click="loginorreg" class="t_login_btn_box">
              		注册
              	</div>
              </div>

            </div>


          </div>
      </div>

    </div>
    <div style="position: fixed; left: 0; width:100%; bottom: 20px; font-size: 12px; z-index: 99;" class="flexcc" v-if="icp">
      <a target="_blank" href="https://beian.miit.gov.cn/" class="flexc">
        <img src="../../static/img/beian.png" style="margin-right: 10px;">{{icp}}
      </a>
    </div>
  </div>

</template>

<script>

	export default {
		name: 'login',
    components:{

    },
		data() {
			return {
				logintype:1,
				codemsg:'获取验证码',
				form:{
					username:'',//账号名称
					password:'',//密码
					phonenum:'',//手机号
					code:'',//验证码
					yqcode:'',//邀请码
					passwordagin:'',//再次输入密码
				},
				bgimg:require('@/../static/img/loginbg.png'),
				// bgimg:'https://img.jbzj.com/file_images/article/202205/2022053011053840.png',
				logoimg:'',
				comname:'欢迎使用',
				readonly:true,
        		xinxi:"",
				check_code:'',
        shoujiban:false,
        distributor:0,
        icp:""
			}
		},
		created() {
      axios.get('/api/logo').then((response)=>{
      	if (response.data.msg.code == 0) {
          this.bgimg = response.data.data.login_background
          this.comname = response.data.data.shop_name
          this.logoimg = response.data.data.system_logo
          this.icp = response.data.data.icp
          this.distributor = response.data.data.distributor
          console.log(this.distributor)
          document.title = response.data.data.shop_name
          localStorage.setItem('shop_name',response.data.data.shop_name)
          localStorage.setItem('system_logo',response.data.data.system_logo)
          localStorage.setItem('left_logo',response.data.data.left_logo)
          localStorage.setItem('icp',response.data.data.icp)

      	} else {
      		this.$message.error(response.data.msg.info);
      	}

        var dz_url = window.location.href;//获取地址
        var check_code2 = dz_url.split('?')[1];//获取?之后的参数字符串

        if(check_code2==undefined){
          this.check_code = ''
        }else{
          this.logintype = 2
          this.check_code = decodeURIComponent(check_code2.split('&')[0])

          //用户端可能有这个值  有的话就需要邀请码才能注册
          if(check_code2.split('&')[1]){
            this.distributor = 1
          }else{

          }

        }
      })
		},
		mounted() {
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;


      }else{

      }
		},
		methods: {
			choosetype(i){
				this.logintype = i
				//重置数据
				this.codemsg = '获取验证码'
				this.form.username = ''
				this.form.password = ''
				this.form.phonenum = ''
				this.form.code = ''
				this.form.yqcode = ''
				this.form.passwordagin = ''
			},
			//注册，登录，找回
			loginorreg(){
				//1登录，2注册，3找回

				if(this.logintype==1){
					//登录
					if(this.form.username==''){
						this.$message.error('请输入用户名');
						return
					}
					if(this.form.password==''){
						this.$message.error('请输入密码');
						return
					}
					var obg={
						name:this.form.username,
						password:this.form.password,
					}

					axios.post('/api/login',obg).then((response)=>{
            console.log(response)
						if (response.data.msg.code == 0) {
							this.$message({
								message: '登录成功',
								type: 'success'
							});
							//1 管理员 0 用户
							console.log(response.data.data.is_owner)

              if(response.data.data.is_owner==1){
                //临时写在这里
                axios.get('/own/auth/user').then((response2)=>{
                	if (response2.data.msg.code == 0) {
                    localStorage.setItem('user',JSON.stringify(response2.data.data))
                    this.$nextTick(()=>{
                      if(this.shoujiban){
                        window.open(window.location.origin+'/hou/shangpinguanli/gongyingshangshangpin', "_self")
                      }else{
                        window.open(window.location.origin+'/hou', "_self")
                      }
                    })
                	} else {
                		this.$message.error(response2.data.msg.info);
                	}
                })
              }

              if(response.data.data.is_owner==0){
                axios.get('/agent/auth/user').then((response2)=>{
                	if (response2.data.msg.code == 0) {
                    localStorage.setItem('user',JSON.stringify(response2.data.data))
                    this.$nextTick(()=>{
                      if(this.shoujiban){
                        window.open(window.location.origin+'/web/shangpinguanli/zaishoushangpin', "_self")
                      }else{
                        window.open(window.location.origin+'/web', "_self")
                      }
                    })
                	} else {
                		this.$message.error(response2.data.msg.info);
                	}
                })
              }

							// this.$router.push({
							// 	path: '/'
							// });
						} else {
							this.$message.error(response.data.msg.info);
						}
					})


				}
				if(this.logintype==2){
					//注册
					if(this.form.username==''){
						this.$message.error('请输入用户名');
						return
					}
					if(this.form.password==''){
						this.$message.error('请输入密码');
						return
					}
					if(this.form.phonenum==''){
						this.$message.error('请输入手机号');
						return
					}
					if(this.form.code==''){
						this.$message.error('请输入验证码');
						return
					}



					var obg={
						name:this.form.username,
						password:this.form.password,
						mobile:this.form.phonenum,
						sms_code:this.form.code,
						invite_code:this.form.yqcode,
						check_code:this.check_code
					}

					axios.post('/agent/user/register',obg).then((response)=>{
						if (response.data.msg.code == 0) {
							this.$message({
								message: '注册成功',
								type: 'success'
							});
							this.logintype = 1
						} else {
							this.$message.error(response.data.msg.info);
						}
					})


				}
				if(this.logintype==3){
					if(this.form.username==''){
						this.$message.error('请输入用户名');
						return
					}
					if(this.form.password==''){
						this.$message.error('请输入密码');
						return
					}
					if(this.form.phonenum==''){
						this.$message.error('请输入手机号');
						return
					}
					if(this.form.code==''){
						this.$message.error('请输入验证码');
						return
					}
					if(this.form.password!=this.form.passwordagin){
						this.$message.error('两次输入密码不同');
						return
					}
					//找回
					var obg={
						name:this.form.username,
						mobile:this.form.phonenum,
						sms_code:this.form.code,
						passwd:this.form.password,
						passwd_agin:this.form.passwordagin,
					}

					axios.post('/api/password/reset',obg).then((response)=>{
						if (response.data.msg.code == 0) {
							this.$message({
								message: '重置成功',
								type: 'success'
							});
							this.logintype = 1
						} else {
							this.$message.error(response.data.msg.info);
						}
					})



				}
			},
			//获取验证码
			getcode(){

				if(this.form.phonenum.length!=11){
					this.$message.error('请输入正确手机号');
					return
				}
				if(this.codemsg=='获取验证码'){
					this.codemsg = 60
					var time = setInterval(()=>{
						if(this.codemsg>0){
							this.codemsg--
						}else{
							this.codemsg = '获取验证码'
							clearInterval(time)
						}
					},1000)

					if(this.logintype==2){
						//注册
						var obg = {
							mobile:this.form.phonenum,
							type:''
						}
						axios.post('/api/user/register/code/send',obg).then((response)=>{
							if (response.data.msg.code == 0) {
								this.$message({
									message: '发送成功',
									type: 'success'
								});
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
					}
					if(this.logintype==3){
						if(this.form.username==''){
							this.$message.error('请输入用户名');
							return
						}
						//重置
						var obg = {
							mobile:this.form.phonenum,
							name:this.form.username
						}
						axios.post('/api/reset/code/send',obg).then((response)=>{
							if (response.data.msg.code == 0) {
								this.$message({
									message: '发送成功',
									type: 'success'
								});
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
					}


				}

			}
		}
	}
</script>

<style scoped>
	.t_body_bg{
		width:100vw;
		height:100vh;
		/* background-image: url('/static/img/loginbg.png'); */
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
	.t_login_box{
		width: 524px;
		/* height: 776px; */
		padding: 30px;
		border-radius: 45px;
		background-color: #f6f8fb;
		text-align: center;
		margin-right: 200px;
	}
	.t_login_con{
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	.t_type_box{
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}
	.t_type_btn{
		width: 100px;
		height: 50px;
		background-color: #e3e8f1;
		border-radius: 25px;
		text-align: center;
		line-height:50px ;
		color: #AFB3BC;
		border: 1px solid #E3E8F1;
		cursor: pointer;
	}
	.t_type_btn_lei{
		background-color: #E6EFFF;
		color: #005AFF;
		border: 1px solid #005AFF;
	}
	.t_input_box{
		border: 1px solid #e3e8f1;
		border-radius: 25px;
		display: flex;
		height: 46px;
		align-items: center;
		background-color: white;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.t_input_box img{
		margin-left: 22px;
		margin-right: 0px;
	}
	/deep/.t_input_box .el-input__inner{
		border: none;
	}
	.t_get_code{
		width: 112px;
		height: 40px;
		background: #e6efff;
		border: 1px solid #005aff;
		border-radius: 25px;
		text-align: center;
		line-height: 40px;
		color: #005AFF;
		font-size: 14px;
		cursor: pointer;

	}
	.t_login_btn_box{
		background-color:#005aff;
		color: white;
		text-align: center;
		height: 50px;
		line-height: 50px;
		font-size: 18px;
		border-radius: 25px;
		margin-top: 60px;
		cursor: pointer;
	}
	.t_tips_btn{
		color: #afb3bc;
		font-size: 14px;
		text-align: center;
		margin-top: 23px;
		cursor: pointer;
	}
	.t_logo_font{
		margin-top: 58px;
		color: #005aff;
		font-size: 29px;
	}
	.t_logo_font img{
		width: 100px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.t_welcome_font{
		margin-top: 28px;
		margin-bottom: 28px;
		font-weight: bold;
		font-size: 28px;
	}
	/deep/.t_del_com_input .el-input__inner{
		border: none !important;
		background-color: white !important;
	}
</style>
<style scoped lang="less">

</style>
